import {Component} from '../react-core.js'
export default class ProductList extends Component{
    constructor(){
        super()
        this.state = {
            stateAll:false,
            cartList:[
                {
                  id: 1001,
                  url: 'https://image2.suning.cn/uimg/b2c/newcatentries/0010128947-000000000602731511_1_800x800.jpg',
                  name: 'javascript高级编程',
                  price: 28.9,
                  num: 0,
                  singlePrice: 0,
                  state: false
                },
                {
                  id: 1002,
                  url: 'https://image1.suning.cn/uimg/b2c/newcatentries/0010128947-000000000614428161_1_800x800.jpg',
                  name: 'css高级编程',
                  price: 16.67,
                  num: 0,
                  singlePrice: 0,
                  state: false
                }
              ]
        }
    }
    render(){
        let str = `<table>
                    <tr>
                        <th><input type="checkbox" name="checkall"  ${this.state.stateAll?'checked':''}>全选框</th>
                        <th>商品图片</th>
                        <th>商品信息</th>
                        <th>商价</th>
                        <th>数量</th>
                        <th width="100px">总价</th>
                        <th>操作</th>
                    </tr>`
        let trStr = this.state.cartList.map(item => {
            return `<tr>
                        <td><input type="checkbox" name="checksingle"  ${item.state?'checked':''} data-index="${item.id}"></td>
                        <td><img src="${item.url}" alt=""></td>
                        <td>${item.name}</td>
                        <td>￥${item.price}</td>
                        <td>
                            <input type="button" name="minus" value="-" data-index="${item.id}" ${item.num ==0?'disabled':''}>
                            <input type="text" name="amount" value="${item.num}">
                            <input type="button" name="plus" value="+" data-index="${item.id}">
                        </td>
                        <td class="single-price">￥${item.singlePrice}</td>
                        <td><a href="#">移入收藏</a><br><a href="#" class="del"  data-index="${item.id}">删除</a></td>
                    </tr>`
        }).join('')
        str += trStr + '</table>'
        str += `<h2>商品总价:<span class="total-price">￥${this.totalPrice(this.state.cartList)}</span></h2>`
        return str
    }
    onClick(){
        const target = event.target
         //数量加一
         if (target.value == '+') {
            let id = target.getAttribute('data-index')
            this.onCartNum(id, '+')
            return
        }
        //数量加一
        if (target.value == '-') {
            let id = target.getAttribute('data-index')
            this.onCartNum(id, '-')
            return
        }
        //删除
        if (target.getAttribute('class') == 'del') {
            let id = target.getAttribute('data-index')
            this.deleteProduct(id)
            return
        }
        //全选框
        if (target.getAttribute('name') == 'checkall') {
            this.onCheckAll()
            return
        }
        //单选框
        if (target.getAttribute('name') == 'checksingle') {
            let id = target.getAttribute('data-index')
            this.onCheckSingle(id)
            return
        }

    }
     /**
     * 数量操作
     * @param {*} type 
     */
    onCartNum(id, type) {
        let {cartList,stateAll} = this.state
        //2.根据id查找商品
        let product = cartList.find(item => item.id == id)
        type == '+' ? product.num++ : product.num--
        //2.1计算价格
        product.singlePrice = (product.num * product.price).toFixed(2)
        //3.重新渲染
        this.setState({
            cartList,
            stateAll
        })
    }
    deleteProduct(id) {
        let {cartList,stateAll} = this.state
        let index = cartList.findIndex(item => item.id == id)
        cartList.splice(index, 1)
        //3.重新渲染
        this.setState({
            cartList,
            stateAll
        })
    }
     /**
     * 全选操作
     */
    onCheckAll() {
        let {cartList,stateAll} = this.state
        stateAll = !stateAll
        cartList.forEach(item => item.state = stateAll) //设置所有单选框状态
        //3.重新渲染
        this.setState({
            cartList,
            stateAll
        })
    }
    /**
     * 单选操作
     * @param {*} id 
     */
    onCheckSingle(id) {
        let {cartList,stateAll} = this.state
        //设置点击单选框状态
        let product = cartList.find(item => item.id == id)
        product.state = !product.state
        //设置全选框状态
        stateAll = cartList.every(item => item.state == true)
        //3.重新渲染
        this.setState({
            cartList,
            stateAll
        })
    }
    /**
     * 总价
     * @param {*} cartList 
     * @returns 
     */
    totalPrice(cartList){
        return cartList.reduce((previousValue,curentItem)=>previousValue+= curentItem.state?Number(curentItem.singlePrice):0,0).toFixed(2)
    }
}